import React, { useEffect, useState } from 'react'
import './style.scss'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
const Index = () => {
  const [list, setList] = useState([]);
  const navigate = useNavigate()
  const getList = async () => {
    const resp = await axios.get('/api/list');
    // 异步执行， 非同步执行
    setList(resp.data.data)
  }

  useEffect(() => { getList() }, [])

  return (
    <div>
      {/* 瀑布流 两列 */}

      <div className="list" >
        {
          list.map((v, i) => {
            return <dl className="list-item" key={v.id} onClick={() => navigate(`/detail/${v.id}`, { state: v })}>
              <dt>
                <img src={v.image} alt="" />
              </dt>
              <dd>
                <h3>{v.title}</h3>
                <div className="price">
                  ￥：{v.price}
                </div>
              </dd>
            </dl>
          })
        }
      </div>
      {/* 触底加载更多 */}
    </div>
  )
}

export default Index